<template>
  <div class="mt-20">
    <Button label="去AutoAnimate页" @click="toHome" severity="warn"/>
    <div class="mt-20">
      <div ref="dropdown" class="dropdown">
        <Button label=" Click me to open!" severity="info" @click="show = !show" />
        <div class="dropdown-content mt-10" v-if="show">
          Sea of Tranquility a mote of dust suspended in a sunbeam hundreds of thousands concept of the number one realm of the galaxies
          radio telescope. As a patch of light descended from astronomers two ghostly white figures in coveralls and helmets are softly
          dancing emerged into consciousness Orion's sword encyclopaedia galactica. Another world bits of moving fluff network of wormholes
          muse about network of wormholes with pretty stories for which there's little good evidence and billions upon billions upon billions
          upon billions upon billions upon billions upon billions.
        </div>
      </div>
      <div class="dropdown" ref="changeRef">
        <Button label="交换" severity="danger" @click="isChange = !isChange" />
        <div class="justify-between mt-20" v-if="isChange">
          <div style="width: 50%;background: red">
            <span>左左左左左左左左左左左左左左左左左左左左</span>
          </div>
          <div style="width: 50%;background: green">
            <span>右右右右右右右右右右右右右右右右右右右右</span>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-20">
      <img src="~/assets/gif/ai.gif" alt="">
    </div>
  </div>
</template>

<script setup>
import autoAnimate from "@formkit/auto-animate"

const dropdown = ref() // we need a DOM node
const show = ref(false)

const changeRef = ref(null);

const isChange = ref(false);

onMounted(() => {
  autoAnimate(dropdown.value);
  autoAnimate(changeRef.value);
})



const toHome = () => {
  navigateTo('/')
}
</script>

<style scoped>

.mt-20{
  margin-top: 20px;
}

.mt-10{
  margin-top: 10px;
}

.dropdown{
  border: 1px solid #fff;
  width: 100%;
  padding: 20px;
}

.justify-between{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

</style>
